<!--新页面模板-->
<template>
  <!--  边坡技术评定记录-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="24">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="输入可查询" style="width:350px">
              <template slot="prepend">边坡编号/名称</template>
            </el-input>
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
            <!--            <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">-->
            <!--              <el-option-->
            <!--                v-for="item in roadSelectList"-->
            <!--                :key="item.id"-->
            <!--                :label="item.name"-->
            <!--                :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <el-select v-model="form.slopeId" filterable clearable placeholder="选择边坡" @focus="getSlopeList">
              <el-option
                v-for="item in slopeSelectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

            <el-date-picker
              v-model="form.startCreateTime" v-if="form.isQueryHistory!==2"
              type="datetime"
              style="width: 200px"
              value-format="timestamp"
              placeholder="选择开始日期"/>
            <el-date-picker
              v-model="form.endCreateTime" v-if="form.isQueryHistory!==2"
              type="datetime"
              style="width: 200px"
              value-format="timestamp"
              placeholder="选择终止日期"/>
            <el-select v-model="form.techniqueType" filterable style="width: 200px" clearable placeholder="评定等级">
              <el-option
                v-for="item in EnumTechniqueTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
            <el-button class=" common_btn-defalut" style="margin-bottom: 20px" @click="addTechnical()"
                       :disabled="hasPermission('slope:tech:add')?false:'disabled'">填写边坡状况评定表
            </el-button>
            <el-radio-group v-model="form.isQueryHistory" @change="form.page=1;queryList()">
              <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <div v-if="form.isQueryHistory!==2">
              <el-table :data="tableList" ref="myTable" border>
                <el-table-column label="序号" width="70">
                  <template slot-scope="scope">
                    {{getIndex(scope.$index)}}
                  </template>
                </el-table-column>
                <el-table-column prop="slopeNo" min-width="180" label="边坡编号"></el-table-column>
                <el-table-column prop="name" show-overflow-tooltip min-width="180" label="边坡名称"></el-table-column>
                <el-table-column prop="roadName" width="140" show-overflow-tooltip label="所属路线"></el-table-column>
                <el-table-column prop="deptName" width="150" show-overflow-tooltip label="管养单位"></el-table-column>
                <el-table-column prop="investigator" min-width="100" show-overflow-tooltip
                                 label="调查人"></el-table-column>
                <el-table-column prop="investigationDeptTreeName" min-width="100" show-overflow-tooltip
                                 label="调查单位 "></el-table-column>
                <el-table-column prop="techniqueTypeName" min-width="100" label="分数">
                  <el-table-column prop="riskLevelName" min-width="120" label="评定等级">
                    <template slot-scope="scope">
                      <span v-if="scope.row.techniqueTypeName === '计算错误'" style="color: #ff7a00">{{scope.row.techniqueTypeName}}</span>
                      <span v-else style="color: #4caf50">
                      <p>{{scope.row.score}}</p>
                      <el-tag size="mini" :style="scope.row.techniqueType| gradeDangerColor"
                              style="color: white">
                        {{scope.row.techniqueTypeName}}
                      </el-tag>
                    </span>
                    </template>
                  </el-table-column>
                  <template slot-scope="scope">
                    <span v-if="scope.row.techniqueTypeName === '计算错误'" style="color: #ff7a00">{{scope.row.techniqueTypeName}}</span>
                    <span v-else style="color: #4caf50">{{scope.row.techniqueTypeName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="investigateTime" width="120" label="调查日期">
                  <template slot-scope="scope">{{scope.row.investigationTime | formatTimer2}}</template>
                </el-table-column>
                <el-table-column prop="count" width="100" sortable label="次序"></el-table-column>
                <el-table-column label="操作" fixed="right" min-width="260">
                  <template slot-scope="scope">
                    <el-popconfirm v-if="hasPermission('slope:tech:del')" confirmButtonText='好的' cancelButtonText='不用了'
                                   icon="" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                      <button slot="reference" class="btn_delete">删除</button>
                    </el-popconfirm>
                    <button class="btn_edit" @click="getSlopeListDetail(scope.row)" style="margin-left: 0.5vw">查看详情</button>
                    <button class="btn_add" @click="editDetail(scope.row)"
                            v-if="hasPermission('slope:tech:add')&&form.isQueryHistory==0">编辑
                    </button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.page"
                :page-size="form.pageSize"
                :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                layout="sizes, prev, pager, next"
                :total="form.total">
              </el-pagination>
            </div>
            <!--            2023年度-->
            <div v-else>
              <el-table :data="tableListAll" border ref="myTable">
                <el-table-column label="序号" width="70">
                  <template slot-scope="scope">
                    {{getIndex(scope.$index)}}
                  </template>
                </el-table-column>
                <el-table-column prop="slopeNo" min-width="180" label="边坡编号" key="slopeNo"></el-table-column>
                <el-table-column prop="name" key="name" show-overflow-tooltip min-width="180"
                                 label="边坡名称"></el-table-column>
                <el-table-column prop="roadName" key="roadName" width="140" show-overflow-tooltip
                                 label="路线名称"></el-table-column>
                <el-table-column prop="deptName" key="deptName" width="150" show-overflow-tooltip
                                 label="管养单位"></el-table-column>
                <el-table-column prop="slopeTypeName" key="slopeTypeName" width="150" show-overflow-tooltip
                                 label="边坡类型"></el-table-column>
                <el-table-column prop="techniqueType" key="techniqueType" width="140" label="技术评定等级">
                  <template slot-scope="scope">
                    <el-tag size="mini" :style="scope.row.techniqueType| gradeDangerColor"
                            style="color: white;cursor: pointer"
                    >
                      {{scope.row.techniqueTypeName}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="techniqueTime" key="techniqueTime" width="170" label="技术评定时间"></el-table-column>
                <el-table-column prop="height" key="height" width="150" show-overflow-tooltip
                                 label="坡高"></el-table-column>
                <el-table-column prop="hasHistoryName" key="hasHistoryName" width="150" show-overflow-tooltip
                                 label="是否有历史灾害"></el-table-column>
                <el-table-column prop="zhiHu" key="zhiHu" width="150" show-overflow-tooltip
                                 label="是否锚索加固"></el-table-column>
                <el-table-column prop="shunCeng" key="shunCeng" width="150" show-overflow-tooltip
                                 label="是否顺层边坡"></el-table-column>

                <el-table-column label="操作" fixed="right" min-width="260">
                  <template slot-scope="scope" v-if="scope.row.techniqueType!==0">
                    <el-popconfirm v-if="hasPermission('slope:tech:del')" confirmButtonText='好的' cancelButtonText='不用了'
                                   icon="" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                      <button slot="reference" class="btn_delete">删除</button>
                    </el-popconfirm>
                    <button class="btn_edit" @click="getSlopeListDetail(scope.row)" style="margin-left: 0.5vw">查看详情</button>
                    <button class="btn_add" @click="editDetail(scope.row)"
                            v-if="hasPermission('slope:tech:add')">编辑
                    </button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.page"
                :page-size="form.pageSize"
                :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                layout="sizes, prev, pager, next"
                :total="form.total">
              </el-pagination>
            </div>
          </div>
          <!--          查看编辑-->
          <el-drawer :title="showDetailTitle"
                     :visible.sync="showDetail"
                     v-if="showDetail"
                     custom-class="demo-drawer"
                     size="70%">
            <div class="demo-drawer__content1">
              <technical-check-detail-new ref="operation" :currentRow="currentRow"
                                          :isLook="isLook" @submit="submit"></technical-check-detail-new>
            </div>
          </el-drawer>
          <!--          新增-->
          <el-drawer
            title="边坡技术状况评定调查表"
            :key="drawerKey"
            :visible.sync="newForm"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="70%">
            <div class="demo-drawer__content">
              <technical-check-form-new @changedis="disableds" ref="technicalFormNew"
                                        @submitClose="submitClose"></technical-check-form-new>
            </div>
            <div class="demo-drawer__footer">
              <el-button @click="newForm=false" type="info">取 消</el-button>
              <!--              -->
              <el-button type="primary" @click="submitDrawer" :disabled="isDisabled" class=" common_btn-defalut">
                确 定
              </el-button>
            </div>
          </el-drawer>
        </div>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
  import technicalCheckFormNew from "./technicalCheckFormNew";
  import ItemMixins from "../item.mixins";
  import {
    getTechnicalDetailNew,
    getTechnicalFormListNew,
    technicalDeleteNew,
    getQueryDownloadSlopeTechniqueList
  } from '@/services/model/form';
  import {getSlope} from '@/services/model/road-mgmt';
  import TechnicalCheckDetailNew from "./detailNew";
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    components: {
      TechnicalCheckDetailNew,
      technicalCheckFormNew,
      XLoading
    },
    mixins: [ItemMixins],
    data() {
      return {
        isLoading: false,
        EnumSysBooleanList: [
          {code: 0, name: '最新一次'},
          {code: 2, name: '首次'},
          {code: 1, name: '历史所有'},

        ],
        restaurants: [],
        state: '',
        timeout: null,
        isDisabled: true,
        drawerKey: 1,
        showDetailTitle: '',
        newForm: false,
        isLook: true,
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        tableList: [],
        tableListAll: [],
        currentRow: {
          formList: []
        },
        form: {
          page: 1,
          pageSize: 10,
          roadSectionId: '',
          startCreateTime: null,
          endCreateTime: null,
          isQueryHistory: 0,
        },
        showDetail: false,
        EnumTechniqueTypeList: [
      {code: 1, name: "1类"},
      {code: 2, name: "2类"},
      {code: 3, name: "3类"},
      {code: 4, name: "4类"},
      {code: 5, name: "5类"}],
      }
    },
    watch: {},
    computed: {},
    mounted() {
    },
    methods: {
      disableds(value) {
        this.isDisabled = value
      },
      async handleDelete(id) {
        let res = await technicalDeleteNew({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '删除成功'
          })
        }
        this.queryList()
      },
      getSlopeList() {
        if (!this.form.roadId) {
          this.$message('请先选择路线');
          return
        }
      },
      submitClose() {
        this.drawerKey += 1
        this.newForm = false
        this.queryList()
      },
      submitDrawer() {
        this.$refs.technicalFormNew.validatorForm()
      },
      submit() {
        this.currentRow = {};
        this.showDetail = false
        this.queryList()
      },
      changeRoad() {
        this.$set(this.form, 'slopeId', '');
        const {deptTreeId, roadId} = this.form
        this.getSelectSlopeList(deptTreeId, roadId)
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel(deptTreeId) {
        this.$forceUpdate()
        this.$set(this.form, 'roadId', '');
        this.$set(this.form, 'slopeId', '');
        this.form.deptTreeId = deptTreeId
        this.queryList()
        this.changeDept()
      },
      async editDetail(row) {
        // return
        let id
        if (this.form.isQueryHistory == 2) {
          id = row.orderId
        } else {
          id = row.id
        }
        let detail = await getTechnicalDetailNew({id: id})
        this.currentRow = detail.data
        this.$nextTick(() => {
          this.showDetail = true
          this.showDetailTitle = '编辑边坡技术状况评定表'

          this.isLook = false
        })
      },
      async getSlopeListDetail(row) {
        let {data} = await getSlope({id: row.slopeId})
        this.checkDetail(row,data)
      },
      async checkDetail(row,slopeDetail) {
        let id
        if (this.form.isQueryHistory == 2) {
          id = row.orderId
        } else {
          id = row.id
        }

        let detail = await getTechnicalDetailNew({id: id})
        this.currentRow = detail.data
        if(slopeDetail){
          this.currentRow={...slopeDetail,...this.currentRow}
          this.currentRow.isLook=true
        }

        this.$nextTick(() => {
          this.showDetail = true
          this.showDetailTitle = '查看边坡技术状况评定详情'
          this.isLook = true
        })
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      addTechnical() {
        this.newForm = true;
        this.isDisabled = false
        this.$nextTick(() => {
          this.$refs.technicalFormNew.isAdd()
        })
      },
      async queryList() {
        this.isLoading = true
        if (this.form.isQueryHistory == 2) {
          this.form.startCreateTime = null
          this.form.endCreateTime = null
          this.tableListAll = []
        } else {
          this.tableList = []

        }

        let action = this.form.isQueryHistory !== 2 ? getTechnicalFormListNew : getQueryDownloadSlopeTechniqueList
        let res = await action(this.form)
        if (this.form.isQueryHistory == 2) {
          this.tableListAll = res.data?.records || []
        } else {
          this.tableList = res.data?.records || []

        }
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false

        this.$nextTick(() => {
          this.$refs.myTable.doLayout();
        });

      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      //获取路线列表
      async changeDept() {
        this.getRoadListByDept(this.form.deptTreeId)
      },
    },
  }


</script>
<style scoped="scoped" lang="less">

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .demo-drawer__content {
    padding-right: 30px;
    height: 75%;
    overflow: auto;
  }

  .demo-drawer__footer {
    bottom: 2%;
  }

  /deep/ .demo-drawer__content1 {
    width: 100%;
    overflow: auto;
  }

</style>
